<template>
  <div class="main">
    <div class="w">
      <a-card class="cardBox about">
        <div class="tit" slot="title">横店影视文化产业大脑</div>
        <div class="content">
          <div v-for="(item, i) in aboutData" :key="i">
            <span>{{ item.tit }}：</span>
            <p> {{ item.des }}</p>
          </div>
          <a>横店影视文化产业大脑驾驶舱</a>
        </div>
      </a-card>
      <a-card class="cardBox coreIndex">
        <div class="tit" slot="title">核心指标 <span>(更新频率：每周一更)</span><div class="nowTime">{{ nowtime | updatetime }} 星期{{ week|getweek }}</div></div>
        <div class="content">
          <div class="items" v-for="(item, i) in coreIndexData" :key="i">
            <div class="item" @click="coreClick(item, i)">
              <div class="ico"><i :class="`iconfont ${item.ico}`"></i></div>
              <div class="num">{{ item.num }}<span>{{item.unit}}</span></div>
              <div class="name">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </a-card>
      <a-card class="cardBox flowPath">
        <div class="tit" slot="title">流程再造</div>
        <div class="content">
          <div class="subTit ">云勘景场景</div>
          <div class="subCon">
            <div class="biaoti">改革前痛点：效率低、成本高、时间协调困难</div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#eee'}">
                  <div class="subCardTit grey" slot="title">改革前</div>
                  <div class="subCardTxt">
                    <img src="@/assets/img/lc1.png">
                  </div>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#e6f7ff'}">
                  <div class="subCardTit" slot="title">改革后</div>
                  <div class="subCardTxt" style="height: 648px;">
                    <img src="@/assets/img/lc2.png">
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </div>
        <div class="content">
          <div class="subTit ">横影通场景</div>
          <div class="subCon">
            <div class="biaoti">改革前痛点：手续多</div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#eee'}">
                  <div class="subCardTit grey" slot="title">改革前</div>
                  <div class="subCardTxt">
                    <img src="@/assets/img/lc3.png">
                  </div>
                </a-card>
              </a-col>
              <a-col :span="12">
                <a-card size="small" :headStyle="{backgroundColor: '#e6f7ff'}">
                  <div class="subCardTit" slot="title">改革后</div>
                  <div class="subCardTxt" style="height: 562px;">
                    <img src="@/assets/img/lc4.png">
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-card>

      <a-card class="cardBox">
        <div class="tit" slot="title">业务协同</div>
        <div class="content">
          <img src="@/assets/img/xt1.png" style="max-width: 100%">
        </div>
      </a-card>

      <a-card class="cardBox appEffect">
        <div class="tit" slot="title">应用成效</div>
        <div class="content">
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="产业经济">
              Content of Tab Pane 1
            </a-tab-pane>
            <a-tab-pane key="2" tab="横店出品">
              Content of Tab Pane 2
            </a-tab-pane>
            <a-tab-pane key="3" tab="影视拍摄">
              Content of Tab Pane 3
            </a-tab-pane>
            <a-tab-pane key="4" tab="影视人才">
              Content of Tab Pane 3
            </a-tab-pane>
          </a-tabs>
        </div>
        <div class="content">
          <div class="biaoti">产业经济</div>
          <div class="itemBox">
            <div class="items" v-for="(item, i) in industrialData" :key="i">
              <div class="item" style="position: relative">
                <div class="ico">
                  <i class="iconfont icon-24gl-city3" v-if="i==0"></i>
                  <i class="iconfont icon-24gl-city4" v-if="i==1"></i>
                  <i class="iconfont icon-24gl-city" v-if="i==2"></i>
                  <i class="iconfont icon-zongyingshou" v-if="i==3"></i>
                  <i class="iconfont icon-icon-shuishou" v-if="i==4"></i>
                </div>
                <p class="name">{{ item.name }}</p>
                <p class="val">{{ item.num }}<small>{{ item.unit }}</small></p>
              </div>
            </div>
          </div>
          <a-row :gutter="16" style="margin-top: 20px;">
            <a-col :span="12">
              <dv-charts :option="revenueOption" style="width: 100%; height: 300px" />
            </a-col>
            <a-col :span="12">
              <dv-charts :option="taxRevenueOption" style="width: 100%; height: 300px" />
            </a-col>
          </a-row>
        </div>
        <div class="content">
          <div class="biaoti">横店出品</div>
          <a-row :gutter="16" style="margin-top: 20px;">
            <a-col :span="9">
              <div style="display: flex">
                <div style="width: 260px; height: 260px;">
                  <dv-active-ring-chart :config="ringChartHdcp" style="width:100%;height:100%" />
                </div>
                <div class="label-tag">
                  <div class="label-item" v-for="(label, i) in ringChartHdcp.data" :key="i">
                    <div :style="`background-color: ${ringChartHdcp.color[i % ringChartHdcp.color.length]};`" />{{ label.name }}<span>{{ label.value }}</span>{{ label.unit }}
                  </div>
                </div>
              </div>
            </a-col>
            <a-col :span="15">
              <dv-charts :option="spslOption" style="width: 100%; height: 260px" />
            </a-col>
          </a-row>
        </div>
        <div class="content">
          <div class="biaoti">影视拍摄</div>
          <div class="itemBox">
            <div class="items" v-for="(item, i) in movieData" :key="i">
              <div class="item">
                <div class="ico">
                  <i class="iconfont icon-yingshi" v-if="i==0"></i>
                  <i class="iconfont icon-paishe" v-if="i==1"></i>
                  <i class="iconfont icon-paishe-" v-if="i==2"></i>
                  <i class="iconfont icon-zongyingshou" v-if="i==3"></i>
                  <i class="iconfont icon-renshu" v-if="i==4"></i>
                </div>
                <p class="name">{{ item.name }}</p>
                <p class="val">{{ item.num }}<small>{{ item.unit }}</small></p>
              </div>
            </div>
          </div>
          <a-row :gutter="16" style="margin-top: 20px;">
            <a-col :span="10">
              <dv-charts :option="liveActionOption" style="width: 100%; height: 300px" />
            </a-col>
            <a-col :span="14">
              <dv-charts :option="crewNumOption" style="width: 100%; height: 270px" />
            </a-col>
          </a-row>
        </div>
        <div class="content">
          <div class="biaoti">影视人才</div>
          <a-row :gutter="16">
            <a-col :span="24">
              <ul class="personnel">
                <li v-for="(item, i) in personnelData" :key="i">
                  <div class="item">
                    <div class="ico">
                      <i class="iconfont icon-yingshi" v-if="i==0"></i>
                      <i class="iconfont icon-renshu" v-if="i==1"></i>
                      <i class="iconfont icon-huoyuerenshu" v-if="i==2"></i>
                      <i class="iconfont icon-fenbu" v-if="i==3"></i>
                    </div>
                    <p class="val">{{item.num}}<span>{{item.unit}}</span></p>
                    <p class="name">{{item.name}}</p>
                  </div>
                </li>
              </ul>
            </a-col>
            <a-col :span="24">
              <a-row>
                <a-col :span="8">
                  <dv-charts :option="gzfxOption" style="width: 100%; height: 300px" />
                </a-col>
                <a-col :span="8">
                  <dv-charts :option="xlfxOption" style="width: 100%; height: 300px" />
                </a-col>
                <a-col :span="8">
                  <dv-charts :option="nlfxOption" style="width: 100%; height: 300px" />
                </a-col>
              </a-row>
            </a-col>
          </a-row>
        </div>
        <div class="content">
          <div class="biaoti">企业类型分析</div>
          <a-row :gutter="16">
            <a-col :span="12">
              <dv-charts :option="qylxOption" style="width: 100%; height: 270px" />
            </a-col>
            <a-col :span="12">
              <dv-charts :option="qylxOption2" style="width: 100%; height: 300px" />
            </a-col>
          </a-row>
        </div>
      </a-card>

      <a-card class="cardBox">
        <div class="tit" slot="title">数据清单</div>
        <div class="content">
          <a-row :span="16">
            <a-col :span="12">
              <dv-charts :option="kqqkOption" style="width: 100%; height: 300px" />
            </a-col>
            <a-col :span="12">
              <div style="padding-right: 30px">
                <div class="title" style="padding-bottom: 10px">十一月实景剧组拍摄数</div>
                <dv-scroll-ranking-board :config="jzpsConfig" style="width:100%;height:220px" />
              </div>
            </a-col>
          </a-row>
        </div>
      </a-card>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-card class="cardBox ">
            <div class="tit" slot="title">工作专班</div>
            <div class="content work">
              <div class="itemTit">{{workData.title}}</div>
              <div class="itemWarp">
                <div class="items">
                  <div class="item" v-for="(item, i) in workData.list" :key="i">{{item}}</div>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="cardBox ">
            <div class="tit" slot="title">政策文件</div>
            <div class="content files">
              <dv-scroll-board :config="filesConfig" style="width:100%;height:345px" />
            </div>
          </a-card>
        </a-col>
      </a-row>

      <a-modal v-model="coreVisible" width="70%" :footer="null" :centered="true" :title="coreTit">
        <dv-charts :option="coreOption" style="width: 100%; height: 300px" />
      </a-modal>

    </div>
  </div>
</template>

<script>
  import moment from 'moment'
  import capsuleChart from '../components/capsuleChart'
  export default {
    name: 'Index',
    components: { capsuleChart },
    filters: {
      updatetime: function (value) {
         return moment(value).format('YYYY-MM-DD HH:mm:ss')
      },
      getweek (e) {
        var week = ['一', '二', '三', '四', '五', '六', '日']
        return week[e - 1]
      }
    },
    data () {
      return {
        coreVisible: false,
        coreTit: '',
        coreOption: {
          grid: {
            top: 15, left: 40, right: 15, bottom: 25
          },
          xAxis: {
            data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06',
              '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12' ]
          },
          yAxis: {
            data: 'value'
          },
          series: [
            {
              data: [1200, 2230, 1900, 2100, 3500, 4200, 3985, 5230, 6900, 6100],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            }
          ]
        },
        timer: null,
        nowtime: new Date(),
        week: moment().format('E'),
        aboutData: [
          { tit: '牵头单位', des: '横店影视文化产业集聚区管委会' },
          { tit: '协同单位', des: '市委宣传部、市公安局、市经信局、市人社局、市卫健局、市人才办、市教育局、市民政局、市应急管理局、市文旅局、市商务局、市市场监管局、市金融办' },
          {
            tit: '场景简介',
            des: '影视产业存在影视拍摄标准不统一、信息化程度低，产业配套供应不畅通、上下游产业链延伸能力不足等问题，制约了产业高质量发展，横店影视文化产业大脑构建涵盖产业资源、集成产业服务和综合各种产业分析决策体系为一体的产业智能应用，贯通影视作品的剧本创作、拍摄、后期制作、版权交易、衍生品开发及交易等全生命周期，为影视文化产业高质量发展数字化赋能，全面支撑影视工业化转型。'
          },
          { tit: '服务对象', des: '在横店相关影视企业、人员' }
        ],
        coreIndexData: [
          { ico: 'icon-guoji', num: 1499, unit: '家', name: '入区企业' },
          { ico: 'icon-zhishu', num: 269, unit: '个', name: '剧组' },
          { ico: 'icon-jujiqu-01', num: 15720, unit: '人', name: '活跃影视人才' },
          { ico: 'icon-fazhanguanli', num: 165.76, unit: '亿元', name: '年度累计营收' },
          { ico: 'icon-a-zu17545', num: 1432, unit: '次', name: '线上勘景' },
          { ico: 'icon-renshu', num: 6593, unit: '人', name: '横影通用户' }
        ],
        industrialData: [
          { num: 6361, unit: '家', name: '东阳' },
          { num: 2560, unit: '家', name: '横店' },
          { num: 1499, unit: '家', name: '集聚区' },
          { num: 1848.24, unit: '亿元', name: '累计营收' },
          { num: 172.15, unit: '亿元', name: '累计税收' }
        ],
        revenueOption: {
          title: {
            text: '近三年营收'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2019', '2020', '2021']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            // #d4d4d4
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            // name: '销售额',
            data: 'value',
            min: 0,
            max: 230,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '2019',
              data: [48, 60, 66, 78, 96, 120, 150, 158, 178, 190, 208, 225],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2020',
              data: [29, 36, 42, 58, 69, 89, 110, 122, 144, 150, 182, 190],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2021',
              data: [39, 46, 52, 68, 79, 109, 130, 142, 164, 170],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        }, // 营收
        taxRevenueOption: {
          title: {
            text: '近三年税收'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2019', '2020', '2021']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            // name: '销售额',
            data: 'value',
            min: 0,
            max: 30,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '2019',
              data: [3, 4, 6, 8, 11, 14, 16, 17, 20, 22, 25, 28],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2020',
              data: [3, 4, 5, 7, 8, 10, 10, 11, 11, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2021',
              data: [3, 4, 5, 7, 7, 10, 10, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        }, // 税收
        ringChartHdcp: {
          radius: '65%',
          activeRadius: '70%',
          data: [
            {
              name: '电影',
              value: 1043,
              unit: '部'
            },
            {
              name: '网剧',
              value: 13450,
              unit: '部'
            },
            {
              name: '电视剧',
              value: 53578,
              unit: '部'
            }
          ],
          color: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f'],
          digitalFlopStyle: {
            fontSize: 24,
            fill: '#666'
          }
        }, // 横店出品
        spslOption: {
          title: {
            text: '影视聚集审批数量'
          },
          xAxis: {
            data: [
              '2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06',
              '2021-08', '2021-07', '2021-09', '2021-10', '2021-11', '2021-12'
            ],
            axisLabel: {
              style: {
                rotate: 20,
                textAlign: 'left',
                textBaseline: 'top',
                fill: '#b7b6b6'
              }
            },
            axisTick: {
              show: false,
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            }
          },
          yAxis: [
            {
              data: 'value',
              min: 0,
              max: 20,
              interval: 5,
              splitLine: {
                style: {
                  lineDash: [3, 3]
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                style: {
                  fill: '#b7b6b6'
                }
              }
            }
          ],
          series: [
            {
              data: [
                13, 8, 11, 12, 7, 10, 9, 14, 8
              ],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 14
                }
              },
              type: 'bar',
              gradient: {
                color: ['#37a2da', '#67e0e3']
              },
              animationCurve: 'easeOutBounce'
            }
          ]
        }, // 审批数量
        movieData: [
          { num: 269, unit: '部', name: '已杀青' },
          { num: 55, unit: '部', name: '在拍' },
          { num: 60, unit: '部', name: '筹拍' },
          { num: 108.5, unit: '亿', name: '游客营收' },
          { num: 747.9, unit: '万人次', name: '游客数' }
        ], // 影视拍摄
        liveActionOption: {
          title: {
            text: '实景基地'
          },
          grid: {
            left: '23%',
            right: 0
          },
          xAxis: {
            min: 0,
            max: 100,
            data: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              // show: false
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            data: ['广州街香港街', '明清宫苑', '秦王宫'],
            axisLabel: {
              style: {
                fill: '#b7b6b6',
                fontSize: 14
              }
            },
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            }
          },
          series: [
            {
              data: [69, 83, 51],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 16
                }
              },
              gradient: {
                color: ['#67e0e3', '#37a2da']
              },
              type: 'bar',
              animationCurve: 'easeOutBack'
            }
          ]
        },
        crewNumOption: {
          title: {
            text: '近三年剧组数'
          },
          color: ['rgb(55, 162, 218)', 'rgb(54, 209, 197)', 'rgb(194, 144, 0)'],
          legend: {
            data: ['2019', '2020', '2021']
          },
          xAxis: {
            // name: '',
            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            data: 'value',
            min: 0,
            max: 30,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          series: [
            {
              name: '2019',
              data: [3, 4, 6, 8, 11, 14, 16, 17, 20, 22, 25, 28],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(55, 162, 218, 0.6)', 'rgba(55, 162, 218, 0)']
              }
            },
            {
              name: '2020',
              data: [3, 4, 5, 7, 8, 10, 10, 11, 11, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(54, 209, 197, 0.6)', 'rgba(54, 209, 197, 0)']
              }
            },
            {
              name: '2021',
              data: [3, 4, 5, 7, 7, 10, 10, 11, 11, 11],
              type: 'line',
              lineArea: {
                show: true,
                gradient: ['rgba(194, 144, 0, 0.6)', 'rgba(194, 144, 0, 0)']
              }
            }
          ]
        },
        personnelData: [
          { name: '影视工匠总人数', num: '117341', unit: '人' },
          { name: '当前在组人数', num: '5910', unit: '人' },
          { name: '活跃人数', num: '15720', unit: '人' },
          { name: '月人均参演数', num: '10.8', unit: '次' }
        ],
        gzfxOption: {
          title: {
            text: '工种分析',
            offset: [0, -30]
          },
          grid: {
            bottom: 0
          },
          series: [
            {
              type: 'pie',
              radius: '60%',
              data: [
                { name: '摄像', value: 109 },
                { name: '演员', value: 8659 },
                { name: '其他', value: 262 }
              ],
              insideLabel: {
                show: true
              }
            }
          ]
        }, // 工种分析
        xlfxOption: {
          title: {
            text: '学历分析',
            offset: [0, -30]
          },
          grid: {
            bottom: 0
          },
          series: [
            {
              type: 'pie',
              radius: '60%',
              data: [
                { name: '博士', value: 89 },
                { name: '本科', value: 898 },
                { name: '专科及以下', value: 8659 }
              ],
              insideLabel: {
                show: true
              }
            }
          ]
        }, // 学历分析
        nlfxOption: {
          title: {
            text: '年龄分析',
            offset: [0, -30]
          },
          grid: {
            bottom: 0
          },
          series: [
            {
              type: 'pie',
              radius: '60%',
              data: [
                { name: '60及以上', value: 889 },
                { name: '18-29', value: 5898 },
                { name: '30-45', value: 3659 }
              ],
              insideLabel: {
                show: true
              }
            }
          ]
        },
        qylxOption: {
          title: {
            text: '企业类型占比',
            offset: [0, -30]
          },
          grid: {
            left: 0,
            right: 0
          },
          series: [
            {
              type: 'pie',
              data: [
                { name: '电视剧', value: 13.81 },
                { name: '影视广告宣传', value: 13.41 },
                { name: '广播剧', value: 13.11 },
                { name: '剧本创作设计', value: 5.5 },
                { name: '道具制作设计', value: 11.88 },
                { name: '综艺', value: 7.42 },
                { name: '电影', value: 11.79 }
              ],
              radius: ['30%', '60%'],
              insideLabel: {
                show: true,
                style: {
                  fontSize: 14,
                  textAlign: 'center',
                  textBaseline: 'middle'
                }
              },
              outsideLabel: {
                style: {
                  fontSize: 14
                }
              }
            }
          ]
        }, // 企业类型占比
        qylxOption2: {
          title: {
            text: '企业类型分析'
          },
          grid: {
            left: '15%',
            // right: 0
          },
          xAxis: {
            min: 0,
            max: 1600,
            data: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              // show: false
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              show: false
            }
          },
          yAxis: {
            data: ['电影', '电视剧', '综艺'],
            axisLabel: {
              style: {
                fill: '#b7b6b6',
                fontSize: 14
              }
            },
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            }
          },
          series: [
            {
              data: [1069, 1183, 635],
              label: {
                show: true,
                position: 'center',
                offset: [0, 0],
                style: {
                  fill: '#fff',
                  fontSize: 16
                }
              },
              gradient: {
                color: ['#67e0e3', '#37a2da']
              },
              type: 'bar',
              animationCurve: 'easeOutBack'
            }
          ]
        }, // 企业类型分析
        kqqkOption: {
          title: {
            text: '十一月勘景情况'
          },
          legend: {
            data: ['预约次数', '实际勘景数']
          },
          xAxis: {
            data: ['秦王宫', '明清宫苑', '广州街', '清明上河图', '梦外滩'],
            axisTick: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLine: {
              style: {
                stroke: '#d4d4d4'
              }
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          yAxis: {
            data: 'value',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              style: {
                fill: '#b7b6b6'
              }
            }
          },
          series: [
            {
              name: '预约次数',
              data: [251, 279, 279, 321, 299],
              type: 'bar',
              label: {
                show: true,
                style: {
                  fill: '#555'
                }
              }
            },
            {
              name: '实际勘景数',
              data: [57, 50, 35, 23, 21],
              type: 'bar',
              label: {
                show: true,
                style: {
                  fill: '#555'
                }
              }
            }
          ]
        }, // 勘景情况
        jzpsConfig: {
          data: [
            {
              name: '秦王宫',
              value: 41
            },
            {
              name: '明清宫苑',
              value: 32
            },
            {
              name: '广州街',
              value: 29
            },
            {
              name: '梦外滩',
              value: 22
            },
            {
              name: '清明上河图',
              value: 22
            }
          ],
          rowNum: 5,
          unit: ' 次'
        }, // 剧组拍摄数
        workData: {
          title: '横店影视文化产业大脑集中攻坚专班',
          list: ['金华市经信局', '横店影视文化产业集聚区管委会', '东阳市委改革办', '东阳市经信局', '项目建设方', '金华移动']
        },
        filesConfig: {
          data: [
            ['横影管〔2021〕1号关于印发《横店影视产业人才基金实施办法》的通知'],
            ['东市委办 东市府办2019年7月10日印发关于促进横店影视文化产业高质量发展的补充意见']
          ],
          index: true,
          rowNum: 8,
          columnWidth: [44],
          align: ['center'],
          oddRowBGC: '',
          evenRowBGC: ''
        } // 政策文件
      }
    },
    mounted () {
      const _this = this
      this.timer = setInterval(() => {
        _this.nowtime = new Date()
      }, 1000)
    },
    beforeDestroy () {
      if (this.timer) {
        clearInterval(this.timer)
      }
    },
    methods: {
      coreClick (data, i) {
        this.coreTit = data.name
        this.coreVisible = true
      },
      callback (key) {}
    }
  }
</script>

<style scoped lang="less">
  /deep/.dv-active-ring-chart .active-ring-info .active-ring-name {color: #999}
  /deep/.dv-capsule-chart { color: #666}
  /deep/.dv-capsule-chart .unit-label {opacity: 0}
  /deep/.ranking-info {color: #666}
  /deep/.dv-scroll-board .rows .row-item {color: #555; position: relative; border-bottom: 1px solid #ddd; overflow: hidden}
  /deep/.dv-scroll-board .rows .row-item::after {position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: #ddd;}
  /deep/.dv-scroll-board .rows .index {color: #fff}
  /deep/.dv-scroll-board .rows .ceil {padding: 0}
  .main {
    width: 100%;
    background: #f0f2f5;
    padding-top: 20px;
    overflow: hidden;
    .w {
      width: 90%; min-width: 1200px; padding-bottom: 1px;
      margin: auto
    }

    .cardBox {
      margin-bottom: 16px;

      .tit {
        position: relative;
        padding-left: 8px
      }

      .tit::before {
        display: inline-block;
        content: '';
        width: 2px;
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        background: #1890ff
      }
      .biaoti {
        background: #f8f8f8;
        margin-bottom: 16px;
        font-size: 15px;
        padding: 8px 15px; position: relative;
      }

      .biaoti::before {
        display: inline-block;
        content: '';
        width: 2px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: #1890ff
      }
      .content+.content{ margin-top: 30px}
    }
  }

  .main .cardBox.about .tit::before {display: none}

  .about {
    .tit {
      text-align: center;
      font-weight: bold;
      font-size: 28px; padding-left: 0;
    }

    .content {
      div {
        display: flex;
        font-size: 16px;

        span {
          color: #1890ff;
          display: inline-block;
          width: 80px;
          font-weight: bold
        }

        p {
          width: calc(100% - 80px);
        }
      }

      a {
        float: right;
        font-size: 15px;
      }
    }
  }

  .coreIndex {
    .content {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
    }
    .tit span {font-size: 13px; color: #666}
    .tit .nowTime { display: inline-block; float: right; font-weight: normal}
    .items {
      padding: 20px 0 20px 20%;
      /*text-align: center;*/
      .item {
        display: inline-block;
        text-align: left;
        margin: auto;
        position: relative;
        padding-left: 55px;
        cursor: pointer;
      }
      .ico {
        position: absolute;
        left: 0;
        text-align: center;
        top: 6px;
        width: 50px;
        line-height: 50px;
        height: 50px;
        background: #4194fb;
        border-radius: 50%;
      }
      .iconfont {  font-size: 30px; color: #fff;}
      .num {
        font-size: 32px; line-height: 40px;
        font-weight: 500;
        color: #37a2da;
        span {float: right;
          padding-top: 6px; font-size: 15px; margin-left: 5px; color: #777 }
      }

      .name {
        color: rgba(0, 0, 0, 0.5)
      }
    }

  }

  .flowPath {
    .subTit {
      width: 100%;
      margin: auto;
      border-radius: 5px;
      color: #1890ff;
      padding: 8px 0;
      font-size: 20px;
      background: #e6f7ff;
      text-align: center;
    }

    .subCon {
      padding-top: 20px;
    }

    .subCardTit {
      text-align: center; color: #1890ff; font-weight: bold;}
    .grey {
      color: #999
    }
    .subCardTxt { width: 100%; text-align: center;
      img { display: inline-block; vertical-align:middle}
    }
  }
  .appEffect {
    .itemBox{ display: flex; padding-top: 15px;
      .items { width: 25%; padding: 0 15px;
        .item{ height: 58px;
          /*background-image: url("~@/assets/img/icon.png");*/
          background-repeat: no-repeat;
          background-position: left center;
          background-size: contain;
          display: flex;
          flex-flow: column;
          align-items: flex-start;
          justify-content: space-evenly; position: relative;
          .ico {
            position: absolute;
            left: 0;
            text-align: center;
            top: 4px;
            width: 50px;
            line-height: 50px;
            height: 50px;
            background: #4194fb;
            border-radius: 50%;
          }
          .iconfont {  font-size: 30px; color: #fff;}
          p{margin-left: 65px; margin-bottom: 0; color: #666}
          p.val {font-size: 28px; line-height: 30px; color: #2e7cf9} // #d66f05
          small {font-size: 15px; margin-left: 5px; color: #777}
        }
      }
    }
    .label-tag {
      width: calc( 100% - 260px);
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      .label-item {
        margin: 5px;
        font-size: 16px;
        display: flex;
        align-items: center; color: #666;
        span{ font-weight: bold; margin-left: 10px;}
        div {
          width: 12px;
          height: 12px;
          margin-right: 5px;
        }
      }
    }
  }
  .title{ text-align: center; font-size: 16px; font-weight: bold; padding: 20px 0;}
  .personnel {
    display: flex;
    li { width: 25%; padding-bottom: 10px; padding-top: 10px; text-align: center }
    div {display: inline-block;position: relative; text-align: left}
    .ico {
      position: absolute;
      left: 0;
      text-align: center;
      top: 0;
      width: 50px;
      line-height: 50px;
      height: 50px;
      background: #4194fb;
      border-radius: 50%;
    }
    .iconfont {  font-size: 30px; color: #fff;}
    p { margin-bottom: 0; padding-left: 60px;}
    .val { font-size: 25px; height: 28px; line-height: 28px; color: #2e7cf9}
    span {font-size: 14px; color: #777; margin-left: 5px;}
  }
  .work {
    text-align: center; display: grid; grid-auto-columns: 1fr; font-size: 15px;
    .itemTit {
      display: inline-block;
      margin: auto;
      border: 1px solid #ccc;
      padding: 10px 15px;
      font-weight: bold;
      position: relative; margin-bottom: 30px;
    }
    .itemTit::after { content: ''; display: inline-block; width: 1px; height: 30px; background: #ccc;
      position: absolute; left: 50%; bottom: -30px;
    }
    .itemWarp {
      display: inline-block;
      margin: auto; margin-top: 29px;
      .items {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        box-sizing: border-box; position: relative;
        .item {writing-mode:vertical-lr;
          border: 1px solid #ccc; padding: 15px 10px; margin: 0 20px; position: relative;
        }
        .item::before {content: ''; display: inline-block; width: 1px; height: 30px; background: #ccc;
          position: absolute; left: 50%; top: -30px;}
      }
      .items::before {
        content: ''; display: inline-block; height: 1px; background: #ccc;
        position: absolute; left: 42px; right: 41px; top: -30px;
      }
    }
  }
</style>
